<template>
	<div class="AddDishDialog">
		<el-dialog
			v-model="dishDialogIsShow"
			title="添加菜品"
			width="60%"
			append-to-body
			:before-close="handleClose"
			destroy-on-close
			@open="openDialog">
			<el-row :gutter="30">
				<el-col :span="2">
					<el-tabs v-model="activeName" tab-position="left" class="demo-tabs" @tab-click="tabClick">
						<el-tab-pane v-for="item in dishList" :key="item.id" :label="item.name" :name="item.id" />
					</el-tabs>
				</el-col>

				<el-col :span="10" style="border-right: 1px solid #d2d2d2">
					<span>请选择菜品</span>
					<el-table
						ref="multipleTableRef"
						:data="tableData"
						height="500px"
						row-key="dishId"
						@selection-change="handleSelectionChange"
						style="width: 100%; margin-top: 10px">
						<el-table-column type="selection" width="30" reserve-selection />
						<el-table-column prop="name" label="菜品名称" />
						<el-table-column prop="price" label="菜品价格" />
					</el-table>
				</el-col>

				<el-col :span="10">
					<span>已选择菜品</span>
					<el-table
						ref="multipleTableRef"
						:data="multipleSelection"
						height="500px"
						style="width: 100%; margin-top: 10px">
						<el-table-column prop="name" label="菜品名称" />
						<el-table-column prop="price" label="菜品价格" />
					</el-table>
				</el-col>
			</el-row>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="handleClose">取消</el-button>
					<el-button type="primary" @click="affirm"> 确认 </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="AddDishDialog">
	import { defineProps, toRefs, defineEmits, ref } from 'vue'
	import { getDishList } from '@/api/index'
	import { ElMessage } from 'element-plus'
	import type { TabsPaneContext } from 'element-plus'

	interface IDishList {
		name: string
		id: string
	}

	const props = defineProps<{
		dishList: IDishList[]
		dishDialogIsShow: boolean
	}>()

	const { dishList, dishDialogIsShow } = toRefs(props)

	const activeName = ref<string>('')

	const openDialog = async () => {
		activeName.value = dishList.value[0].id
		getDishData(activeName.value)
	}

	interface IDishType {
		id:string
		dishId: string
		name: string
		categoryId: string
		price: number
		code: string
		image: string
		description: string
		status: number
	}

	const tableData = ref<IDishType[]>([])

	const getDishData = async (categoryId: string) => {
		try {
			const res = await getDishList<IDishType[]>({ categoryId })
			tableData.value = res.data.map((item: IDishType) => {
				return { ...item, dishId: item.id, copies: 1, dishName: item.name, id: '' }
			})
		} catch (error) {
			ElMessage.error(error as string)
		}
	}

	const tabClick = (tab: TabsPaneContext) => {
		getDishData(tab.props.name as string)
	}

	const multipleSelection = ref<IDishType[]>([])

	const handleSelectionChange = (val: IDishType[]) => {
		multipleSelection.value = Object.freeze(val) as IDishType[]
	}

	const emit = defineEmits(['dishDialogClose', 'getDishParam'])

	const handleClose = () => {
		multipleSelection.value = []
		emit('dishDialogClose')
	}

	const affirm = () => {
		multipleSelection.value.length ? emit('getDishParam', multipleSelection.value) : ElMessage.warning('请选择菜品')
	}
</script>

<style scoped></style>
